<template>
    <div class="common-layout">
        <el-row>
            <el-table :data="state.tableData" 
            :cell-class-name="tableColumnClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @header-click="tableHeaderClick"
            style="width: 100%" height="800">
                <el-table-column prop="date" fixed label="Date" width="120" sortable/>
                <el-table-column 
                    v-for="stock in state.stocks" width="120"
                    :key="stock" 
                    :prop="stock" 
                    :label="stock"/>

            </el-table>
        </el-row>
    </div>
</template>
  
<script>
import { reactive } from 'vue'
import router from '../router'

export default {
    props: {
        page: String,
        raw_data: Object,
    },

    setup(props) {
        const base = props.page
        const sortPropKey = base + "SortProp"
        const sortOrderKey = base + "SortOrder"

        const state = reactive({
            raw_data: null,
            tableData: [],
            stocks: [],
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'date' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            },
        })

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        const formateData = () => {
            state.raw_data = props.raw_data,
            console.log(state.raw_data)

            /*
            state.stocks = Object.keys(state.raw_data)

            // 最大记录数
            let maxRecord = 0
            let maxStock = ''

            state.stocks.forEach(stock => {
                if (maxRecord < state.raw_data[stock].length) {
                    maxRecord = state.raw_data[stock].length
                    maxStock = stock
                }
            })

            let tableDataMap = new Map()
            // 设置初始值
            state.raw_data[maxStock].forEach(item => {
                let tmp = {}
                tmp['date'] = item.date
                state.stocks.forEach(stock => {
                    tmp[stock] = null
                })
                tableDataMap.set(item.date, tmp)
            })

            state.stocks.forEach(stock => {
                state.raw_data[stock].forEach(item => {
                    tableDataMap.get(item.date)[stock] = item.levelPoint
                })
            })
            state.tableData = Array.from(tableDataMap.values())
            */
        }

        formateData()

        const tableColumnClassName = ({row, column, rowIndex, columnIndex}) => {

            let cell = column.label
            let levelPoint = row[cell]
            if (levelPoint) {
                if (levelPoint <= 10) {
                    return 'lplt10-cell'
                } else if(levelPoint <= 20) {
                    return 'lplt20-cell'
                }
            }
        }

        const tableHeaderClick = (column, event) => {
            let stock = column.property
            router.push({path: "/weekDetail", 
                query:{
                    stock: stock,
                }
            })
        }

    
        return {state, tableColumnClassName, tableHeaderClick, sortChange}
    }
}
</script>

<style scope>
/*
.lplt10-cell {
    background: rgb(244, 224, 173);
}
*/

.lplt20-cell {
    background: rgb(229, 251, 212);
}
</style>